<!--
*** Created by zhumin on 2023/09/12.***
*** Description: "代表团成绩页面"
-->
<template>
  <div>
    <common></common>
    <div :class="['component-style', 'results']">
      <div class="results-content">
        <div>
          <el-select v-model="selectedValue" placeholder="请选择" filterable>
            <el-option-group
              v-for="group in options"
              :key="group.FirstCharacter"
              :label="group.FirstCharacter"
            >
              <el-option
                v-for="item in group.DelegationData"
                :key="item.DelegationCode"
                :label="item.DelegationName"
                :value="item.DelegationCode"
              >
              </el-option>
            </el-option-group>
          </el-select>
        </div>
        <div class="medal-total">
          <el-row :gutter="24">
            <el-col :span="8">{{ DelegationName }}</el-col>
            <el-col :span="4">
              <span class="gold"></span>
              <span>{{ medalInfo.gold }}</span>
            </el-col>
            <el-col :span="4">
              <span class="silver"></span>
              <span>{{ medalInfo.silver }}</span>
            </el-col>
            <el-col :span="4">
              <span class="bronze"></span>
              <span>{{ medalInfo.bronze }}</span>
            </el-col>
            <el-col :span="4">
              <span class="medal"></span>
              <span>{{ medalInfo.medal }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="item-medal">
          <el-collapse v-model="itemMedalDefault">
            <el-collapse-item
              :name="row.itemName"
              v-for="(row, index) in itemMedalList"
              :key="index"
            >
              <template slot="title">
                <div class="item-medal-title">
                  <div class="item-medal-data">
                    <div class="item-medal-logo">
                      <img :src="row.logo" alt="" />
                    </div>
                    <div>{{ row.itemName }}</div>
                  </div>
                  <div class="item-medal-detail">
                    <span class="gold "></span>
                    <span>{{ row.gold }}</span>
                    <span class="silver"></span>
                    <span>{{ row.silver }}</span>
                    <span class="bronze"></span>
                    <span>{{ row.bronze }}</span>
                  </div>
                </div>
              </template>
              <div>
                <el-table :data="getTableData(row.itemName)" style="width: 100%">
                  <el-table-column label="小项名称" prop="duelName"> </el-table-column>
                  <el-table-column label="得奖情况">
                    <template slot-scope="scope">
                      <div class="medal-athlete">
                        <div
                          :class="
                            scope.row.medal === 'gold'
                              ? 'gold'
                              : scope.row.medal === 'silver'
                              ? 'silver'
                              : ''
                          "
                        ></div>
                        <div class="athlete-name" @click="gotoAthlete()">{{ scope.row.name }}</div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="日期" prop="date"> </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Util from '@/assets/js/util'
import Storage from '@/assets/js/storage'
export default {
  created() {
    this.options = JSON.parse(JSON.stringify(this.AllDelegations))
  },
  mounted() {},
  data() {
    return {
      selectedValue: 'D012',
      DelegationName: '安徽',
      AllDelegations: [
        {
          FirstCharacter: 'A',
          DelegationData: [{ DelegationCode: 'D012', DelegationName: '安徽' }]
        },
        {
          FirstCharacter: 'B',
          DelegationData: [{ DelegationCode: 'D001', DelegationName: '北京' }]
        },
        {
          FirstCharacter: 'C',
          DelegationData: [{ DelegationCode: 'D022', DelegationName: '重庆' }]
        },
        {
          FirstCharacter: 'D',
          DelegationData: [{ DelegationCode: 'D032', DelegationName: '大连' }]
        },
        {
          FirstCharacter: 'F',
          DelegationData: [{ DelegationCode: 'D013', DelegationName: '福建' }]
        },
        {
          FirstCharacter: 'G',
          DelegationData: [
            { DelegationCode: 'D019', DelegationName: '广东' },
            { DelegationCode: 'D020', DelegationName: '广西' },
            { DelegationCode: 'D024', DelegationName: '贵州' },
            { DelegationCode: 'D028', DelegationName: '甘肃' }
          ]
        },
        {
          FirstCharacter: 'H',
          DelegationData: [
            { DelegationCode: 'D003', DelegationName: '河北' },
            { DelegationCode: 'D008', DelegationName: '黑龙江' },
            { DelegationCode: 'D016', DelegationName: '河南' },
            { DelegationCode: 'D017', DelegationName: '湖北' },
            { DelegationCode: 'D018', DelegationName: '湖南' },
            { DelegationCode: 'D021', DelegationName: '海南' },
            { DelegationCode: 'D037', DelegationName: '火车头体协' },
            { DelegationCode: 'D044', DelegationName: '化工体协' }
          ]
        },
        {
          FirstCharacter: 'J',
          DelegationData: [
            { DelegationCode: 'D007', DelegationName: '吉林' },
            { DelegationCode: 'D010', DelegationName: '江苏' },
            { DelegationCode: 'D014', DelegationName: '江西' },
            { DelegationCode: 'D038', DelegationName: '金融体协' }
          ]
        },
        {
          FirstCharacter: 'K',
          DelegationData: [{ DelegationCode: 'D045', DelegationName: '科学院体协' }]
        },
        {
          FirstCharacter: 'L',
          DelegationData: [
            { DelegationCode: 'D006', DelegationName: '辽宁' },
            { DelegationCode: 'D042', DelegationName: '林业体协' }
          ]
        },
        {
          FirstCharacter: 'M',
          DelegationData: [{ DelegationCode: 'D040', DelegationName: '煤矿体协' }]
        },
        {
          FirstCharacter: 'N',
          DelegationData: [
            { DelegationCode: 'D005', DelegationName: '内蒙古' },
            { DelegationCode: 'D030', DelegationName: '宁夏' },
            { DelegationCode: 'D034', DelegationName: '宁波' }
          ]
        },
        {
          FirstCharacter: 'Q',
          DelegationData: [
            { DelegationCode: 'D029', DelegationName: '青海' },
            { DelegationCode: 'D033', DelegationName: '青岛' },
            { DelegationCode: 'D046', DelegationName: '企业体协' }
          ]
        },
        {
          FirstCharacter: 'S',
          DelegationData: [
            { DelegationCode: 'D004', DelegationName: '山西' },
            { DelegationCode: 'D009', DelegationName: '上海' },
            { DelegationCode: 'D015', DelegationName: '山东' },
            { DelegationCode: 'D023', DelegationName: '四川' },
            { DelegationCode: 'D027', DelegationName: '陕西' },
            { DelegationCode: 'D036', DelegationName: '深圳' },
            { DelegationCode: 'D039', DelegationName: '石油体协' }
          ]
        },
        {
          FirstCharacter: 'T',
          DelegationData: [
            { DelegationCode: 'D002', DelegationName: '天津' },
            { DelegationCode: 'D043', DelegationName: '通信体协' }
          ]
        },
        {
          FirstCharacter: 'X',
          DelegationData: [
            { DelegationCode: 'D026', DelegationName: '西藏' },
            { DelegationCode: 'D031', DelegationName: '新疆' },
            { DelegationCode: 'D035', DelegationName: '厦门' },
            { DelegationCode: 'D047', DelegationName: '香港象棋总会' },
            { DelegationCode: 'D048', DelegationName: '香港国际跳棋协会' },
            { DelegationCode: 'D049', DelegationName: '香港桥牌协会' }
          ]
        },
        {
          FirstCharacter: 'Y',
          DelegationData: [{ DelegationCode: 'D025', DelegationName: '云南' }]
        }
      ],
      options: [],
      medalInfo: {
        gold: 0,
        silver: 0,
        bronze: 0,
        medal: 0
      },
      itemMedalDefault: ['围棋', '象棋', '国际象棋', '桥牌', '五子棋', '国际跳棋'],
      itemMedalList: [
        {
          itemName: '围棋',
          logo: require('../../assets/img/daily/GO.png'),
          gold: 1,
          silver: 0,
          bronze: 0,
          medal: 0
        },
        {
          itemName: '象棋',
          logo: require('../../assets/img/daily/CC.png'),
          gold: 0,
          silver: 1,
          bronze: 0,
          medal: 0
        },
        {
          itemName: '国际象棋',
          logo: require('../../assets/img/daily/CH.png'),
          gold: 0,
          silver: 0,
          bronze: 0,
          medal: 0
        },
        {
          itemName: '桥牌',
          logo: require('../../assets/img/daily/BR.png'),
          gold: 0,
          silver: 0,
          bronze: 0,
          medal: 0
        },
        {
          itemName: '五子棋',
          logo: require('../../assets/img/daily/GB.png'),
          gold: 0,
          silver: 0,
          bronze: 0,
          medal: 0
        },
        {
          itemName: '国际跳棋',
          logo: require('../../assets/img/daily/DR.png'),
          gold: 0,
          silver: 0,
          bronze: 0,
          medal: 0
        }
      ],
      medals: [
        {
          duelName: '专业（职业）女子个人',
          medal: 'gold',
          name: '李小溪',
          date: '2019-11-12'
        }
      ],
      itemMedalDetailList: {
        围棋: [
          {
            duelName: '专业（职业）女子个人',
            medal: 'gold',
            name: '李小溪',
            date: '2019-11-12'
          }
        ],
        象棋: [
          {
            duelName: '少年男子个人',
            medal: 'silver',
            name: '万川',
            date: '2019-11-13'
          }
        ]
      }
    }
  },
  watch: {
    selectedValue(newVal, oldVal) {
      this.AllDelegations.forEach(items => {
        items.DelegationData.forEach(row => {
          if (row.DelegationCode === newVal) {
            this.DelegationName = row.DelegationName
          }
        })
      })
    }
  },
  computed: {
    ...mapState({})
  },
  filters: {},
  components: {},
  methods: {
    getTableData(itemName) {
      return this.itemMedalDetailList[itemName] ?? []
    },
    gotoAthlete(athleteCode) {
      this.$router.push({
        name: 'athlete',
        query: {
          athleteCode: athleteCode
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/scss/results.scss';
</style>
